<template>
	<view class="contener">
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#1abc9c;" color="#1abc9c;"
			loadingText="订单加载中...." fontSize="30rpx"></u-loading-page>
		<view class="biaodanBox">
			<view class="contener700" style="padding-top: 10rpx;">
				<view class="orderListbox">
					<!-- <view class="between">
						<text style="font-size: 30rpx;">订单号:{{item.orderNum}}</text>
					</view> -->
					<view class="orderListxinxi" @click="goDetail">
						<view>
							<image class="orderListboximg" :src="imgapi+JSON.parse(item.snapshot)[0].avatar" mode="">
							</image>
						</view>
						<view style="margin-left: 15rpx;">
							<view style="margin-top: 5rpx;">
								<view class="between2">
									<view>
										<u--text :lines="2" :text="JSON.parse(item.snapshot)[0].title"></u--text>
									</view>
								</view>
								<view style="width: 100%;display: flex;">
									<view style="margin-left: auto;	">
										<rich-text :nodes="getStatus(order.status)"></rich-text>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="orderListprice">
						<view class="xiaoBiao">
							<view>
								合计:<text style="color: #ff7a05;">￥{{item.totalPrice}}</text>
							</view>

							<view class="orderType">
								<u-tag text="采摘订单" v-if="order.type==1"></u-tag>
								<u-tag text="种植订单" type="success" v-if="order.type!=1"></u-tag>
								<view v-if="item.status!=0&&item.status!=-1" style="margin-top: 15rpx;">
									<u-button type="info" text="申请售后" shape="circle" size="mini" @click="apply">
									</u-button>
								</view>
							</view>
						</view>
						<!-- <view class="paybtnBox">
							<button class="paybtn greenborder" v-if="item.status==0">立即支付</button>
							
							<button class="paybtn redborder" v-if="item.status==0"
								@click="cancelOrder(item.orderNum)">取消订单</button>
							<button @tap="tzorderDetails(item)" class="paybtn balckborder" v-else>订单详情</button>
						</view> -->
					</view>
				</view>
				<view class="orderListbox" v-if="plotDetail">
					<view class="between">
						<text style="font-size: 30rpx;">土地信息</text>
					</view>
					<view class="detailsBox">
						<view class="detailsBoxLeft">
							<view v-if="plotDetail.pickOpenTime">
								采摘开放时间
								{{plotDetail.pickOpenTime}} - {{plotDetail.pickOpenTime}}
							</view>
							<view v-if="plotDetail.growOpenTime">
								种植开放时间
								{{plotDetail.growOpenTime}} - {{plotDetail.growOverTime}}
							</view>
							<view>地址:{{plotDetail.address}}</view>
						</view>
						<view class="detailsBoxRight">
							<button type="primary" @tap="handleMapLocation" plain size="mini">导航</button>
						</view>
					</view>
				</view>
				<view class="orderListbox orderListbox2">
					<view class="between">
						<text style="font-size: 30rpx;font-weight: 600;">订单信息</text>
						<view>
							<u-button type="success" icon="server-fill" text="联系商家" throttleTime="100" shape="square"
								size="mini" @click="goChat"></u-button>
						</view>
					</view>
					<view class="detailsBox">
						<view class="detailsBoxLeft">
							<view style="margin: 10rpx 0;">订单编号:
								{{item.orderNum}}
							</view>
							<view style="margin: 10rpx 0;">创建时间: {{item.createTime}}</view>
						</view>
					</view>
				</view>
				
				<view class="orderListbox orderListbox2">
					<view class="between">
						<text style="font-size: 30rpx;font-weight: 600;">物流信息</text>
						<view>
							<u-button type="success" icon="server-fill" text="联系商家" throttleTime="100" shape="square"
								size="mini" @click="goChat"></u-button>
						</view>
					</view>
					<view class="detailsBox">
						<view class="detailsBoxLeft">
							<view style="margin: 10rpx 0;">订单编号:
								{{item.orderNum}}
							</view>
							<view style="margin: 10rpx 0;">创建时间: {{item.createTime}}</view>
						</view>
					</view>
				</view>

				<view class="orderListbox orderListbox2" v-if="storeAvatar&&storeName">
					<view class="between">
						<text style="font-size: 30rpx;font-weight: 600;">商家信息</text>
					</view>
					<view class="detailsBox">
						<view class="detailsBoxLeft">
							<view class="text">电话: {{phone}}</view>
							<view class="text">店铺名称: {{storeName}}</view>
							<view v-if="order.type===0" class="ziTi">自提地址：{{address}}</view>
						</view>
						<view class="detailsBoxRight">
							<button type="primary" @tap="callphone" plain size="mini">致电</button>
						</view>
					</view>
				</view>

				<view class="orderListbox" v-if="order.qrCode && order.hasTake == 1&&order.status==1">
					<view style="border-bottom: 0.5rpx solid #C4C4C4;">
						<text class="textOver" style="font-size: 35rpx;">自提二维码</text>
						<text style="color: red;font-size: 20rpx;">(请向商家出示二维码)</text>
					</view>
					<view class="contBot">
						<image class="codeImg" :src="imgapi+order.qrCode"></image>
					</view>
				</view>

				<view v-if="item.status==0" class="orderListbox3">
					<view class="between">
						<text style="font-size: 30rpx;">支付方式</text>
					</view>
					<radio-group name="pay" @change="payWay">
						<view class="plotAddressBorder between3">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
										class="icon"></image>
								</view>
								<view>
									微信支付
								</view>
							</view>
							<view>
								<radio value="wechat" />
							</view>
						</view>
						<view class="plotAddressBorder between3">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
										class="icon">
									</image>
								</view>
								<view>
									余额支付
								</view>
							</view>
							<view>
								<radio value="balance" />
							</view>
						</view>
					</radio-group>
				</view>
				<button class="paybtn2" @click="pay(item.orderNum)" type="primary" v-if="item.status==0">立即支付</button>
				<button class="paybtn2" @click="theGoodsShow=true" type="primary" v-if="item.status==1">确认收货</button>
				<u-modal :show="theGoodsShow" title="确认收到产品了吗？" :content='content' showCancelButton
					@cancel="theGoodsShow=false" @confirm="confirm(item.orderNum)" buttonReverse></u-modal>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getTime
	} from '@/utils/auth.js'
	import SOtime from "../../js_sdk/fl-SOtime/SOtime";
	export default {
		data() {
			return {
				plotDetail: "",
				loadingShow: false,
				theGoodsShow: false,
				content: "为了保证您的权益，请收到果蔬无误后再确认收货",
				item: {},
				imgapi: "",
				payMode: "", //支付方式
				order: {},
				phone: "",
				storeAvatar: "",
				storeName: ""
			}
		},

		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			this.item = JSON.parse(e.item)
			this.item.createTime = SOtime.time3(this.item.createTime)
			this.getDetail()
		},

		methods: {
			goChat() {
				console.log("12313: ", 12313);
				let id = uni.getStorageSync("usId")
				uni.navigateTo({
					url: '/pages/HM-chat/User-Chat?id=' + id + '&sendid=' + this.order.merchantId +
						'&title=' + this.storeName + "&avatar=" + this.storeAvatar
				})
			},
			goDetail() {
				let id = JSON.parse(this.item.snapshot)[0].id
				uni.redirectTo({
					url: "/pageA/growVegetables/vegetablesDetails?id=" + id
				})
			},
			apply() {
				if (this.item.afterSalesStatus == 0) {
					const items = JSON.stringify(this.item);
					uni.navigateTo({
						url: "/pages/afterSales/selectBulkAfterSale?item=" + encodeURIComponent(items)
					})
				} else {
					console.log("1: ", 2);
					uni.redirectTo({
						url: `/pages/afterSales/returnOrderDetail?orderNum=${this.item.orderNum}`
					})
				}
			},
			getStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #4e4e4e'>待付款</font>"
					case 1:
						return "<font style='color: #139e4c'>已付款</font>"
					case 2:
						return "<font style='color: #d48c11'>商家已扫码核验</font>"
					case 3:
						return "<font style='color: #d48c11'>待评价</font>"
					case 4:
						return "<font style='color: #1e90ff'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return '<font style="color: #90d028;">已退款</font>'
				}
			},
			getDetail() {
				this.$axios({
					url: "user/info/detail",
					method: "post",
					data: {
						orderNum: this.item.orderNum,
					}
				}).then((res) => {
					this.order = res.result.order
					this.storeAvatar = res.result.storeAvatar
					this.storeName = res.result.storeName
					this.phone = res.result.phone
					this.plotDetail = res.result.plotDetail
				})
			},
			//单选事件
			payWay(e) {
				this.payMode = e.detail.value
			},
			//支付订单
			pay(orderNum) {
				if (!this.payMode) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				//成功提交执行对应操作
				if (this.payMode == "balance") {
					uni.showLoading({
						title: "余额支付中......"
					})
					this.balancePay(orderNum)
				} else {
					this.weChatPay(orderNum)
				}
			},
			//微信支付
			weChatPay(orderNum) {
				console.log("微信支付")
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 3
					}
				}).then((response) => {
					uni.hideLoading()
					console.log('res', response)
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
								})
							},
							complete: function(ress) {
								setTimeout(() => {
									//跳转到订单列表
									uni.redirectTo({
										url: '../../pages/mine/order'
									})
								}, 1500)
							}
						});
					}
				})
			},
			// 余额支付
			balancePay(orderNum) {
				this.$axios({
					url: `/user/plot/balancePay`,
					method: "post",
					data: {
						orderNum: orderNum
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			confirm(orderNum) {
				this.theGoodsShow = false
				uni.showLoading({
					title: "收货中......"
				})
				this.$axios({
					url: `user/plot/confirm`,
					method: "post",
					data: {
						orderNum
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: "收货成功",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 导航
			handleMapLocation() {
				if (!this.plotDetail.address) {
					uni.showToast({
						title: "商家未填地址",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "加载中"
				})
				
				
				let address = this.plotDetail.address
				let lat = parseFloat(this.plotDetail.lat)
				let lng = parseFloat(this.plotDetail.lng)			
				console.log("lat: ",lat);
				console.log("ln: ",lng);
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {						
						if (res.errMsg == "getLocation:ok") {		
							uni.openLocation({
								// 传入你要去的纬度
								latitude: lat,
								// 传入你要去的经度
								longitude: lng,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 10,
								success: function() {
									uni.hideLoading()
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						uni.hideLoading()
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
				
			},
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			}

		}
	}
</script>

<style lang="scss">
	.detailsBox {
		width: 750rpx;
		padding: 20rpx 0;
		display: flex;
	}

	.paybtn2 {
		background-color: #18BC37;
		margin: 20rpx 0;
	}

	.orderListbox {
		margin-top: 20rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		/* height: 280rpx; */
		padding: 20rpx;
	}

	.orderListbox3 {
		margin: 20rpx 0 30rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 280rpx;
		padding: 20rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.plotAddressBorder {
		width: 100%;
		/* background-color: #000000; */
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-bottom: 0.5rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.orderListbox2 {
		/* height: 240rpx !important; */
	}

	/deep/ .between3.data-v-16353827 {
		width: 100%;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 28rpx;
		color: #808080;
		/* background-color: #00A0DC; */
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}

	.between2 {
		display: flex;
		justify-content: space-between;
		width: 520rpx;
		font-size: 28rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.xiaoBiao {
			display: flex;
			padding: 10rpx;
			width: 100%;

			.orderType {
				margin-left: auto;
			}
		}
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
		width: 35%;
		color: #999;
	}

	.contBot {
		height: 500rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.codeImg {
		margin: auto;
		height: 450rpx;
		width: 450rpx;
	}
</style>
